<!--
 * @Author: AHANG
 * @Date: 2022-07-22 08:52:49
 * @LastEditors: AHANG
 * @LastEditTime: 2022-07-23 11:56:00
 * @Description: 
-->
<template>
  <div class="infos">
    <v-row class="pa-2 vRow">
      <v-col cols="12" md="4">
        <v-card class="pa-1">
          <v-row>
            <!-- 头像 -->
            <v-col class="Vcol">
              <v-avatar size="128">
                <!-- <img id="avatar" class="pa-1 grey darken-2" /> -->
                <NuxtLogo/>
              </v-avatar>
              <v-chip
                color="primary"
                outlined
                class="my-2"
                @click="ReviseAvatar"
                small
              >
                Revise
              </v-chip>
            </v-col>
            <!-- 基本信息 -->
            <v-col class="Vcol-2">
              <div class="text-lg-h6 text-body-1">NI JIACHENG</div>
              <div class="text-body-1"><span>ID :</span>1410408873</div>
              <div class="text-caption text-lg-body-1">1410408873@qq.com</div>
              <v-chip color="primary my-2" small>Administrator</v-chip>
            </v-col>
          </v-row>
        </v-card>
        <!-- 异地登录 -->
        <v-card class="my-4">
          <v-card-title class="text-body-2"> 最近登录地 </v-card-title>
          <v-card-text>
            <v-list-item>
              <v-list-item-content>
                <v-list-item-title class="font-weight-medium">
                  <div>江西 赣州</div>
                </v-list-item-title>
                <v-list-item-subtitle class="font-weight-bold py-1">
                  <div><span>ip: </span>115.150.114.146</div>
                </v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-list-item>
              <v-list-item-content>
                <v-list-item-title class="font-weight-medium">
                  <div>江西 鹰潭</div>
                </v-list-item-title>
                <v-list-item-subtitle class="font-weight-bold py-1">
                  <div class=""><span>ip: </span>115.150.114.146</div>
                </v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="8">
        <v-card>
          <echarts1></echarts1>
        </v-card>
      </v-col>
    </v-row>
    <v-dialog v-model="dialog" max-width="290">
      <v-card>
        <v-card-title class="headline">修改头像</v-card-title>

        <v-card-text>
          <v-avatar size="64">
            <img class="grey darken-2" />
          </v-avatar>
        </v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>

          <v-btn color="green darken-1" text @click="dialog = false">
            取消
          </v-btn>

          <v-btn color="green darken-1" text @click="dialog = false">
            确认
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
  name: "homePage",
  data() {
    return {
      dialog: false,
    };
  },
  methods: {
    ReviseAvatar() {},
  },
  mounted() {},
};
</script>
<style scoped>
#avatar {
  box-sizing: border-box;
  border: 2px dashed;
}
.Vcol {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.Vcol-2 {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
}
</style>
